<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 400px;
    height: 400px;
    background-color: #23cda2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<body>
  <div id="box" class="box">

  </div>
  <script>
      let num = 0
      document.getElementById('box').addEventListener('mousemove',function(){
          throttle(function(){
            document.getElementById('box').innerHTML = num++
          },1000)
      })

      //节流
    function throttle(fn, duration) {
      if (!window.timeId) {
        window.timeId = setTimeout(function () {
          window.timeId = null
          fn.call(this)
        }, duration)
      }
    }
      // function debounce(fn,duration){
      //   if(window.timeId){
      //     clearTimeout(timeId)
      //     window.timeId = null
      //   }
      //   timeId = setTimeout(fn,duration)
      // }
  </script>
</body>

</html>